<!DOCTYPE html>
<html lang="en">
<head>

    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

      <script type="text/javascript" src="js/qrcode.js"></script>
	  <script type="text/javascript" src="js/reqrcode.js"></script>
	  <script type="text/javascript" src="https://load_star.gitee.io/htmlminifuncs/js/pressclick.js"></script>

	  <style>
	  	.make_btn{
	  		background-color: #00a13b;
	  	}
	  	.make_pressed{
	  		background-color: #00712b;
	  	}

	  	.pc_img_parent{
	  		width: 850px;
	  		margin:0 auto;
	  		clear: both;
	  	}
	  	.pc_qr_img{
	  		width:210px; 
	  		height:210px; 
	  		margin-top:55px;
	  		float:right;
	  		margin-right: 10px;
	  		box-shadow: 2px 2px 6px #eeeeee
	  	}

	  	.pc_input{
	  		width:580px;
	  		height:190px;
	  		margin-left: 10px;
	  		margin-top: 55px;
	  		box-shadow:2px 2px 13px #cccccc;
	  		border-radius: 3px;
	  		border:1px;
			padding:10px;
	  	}

        .phone_img_parent{
            width: 80%;
	  		margin:0 auto;
	  		clear: both;
                                 }
	  	.phone_qr_img{
	  		margin: 0 auto;
	  		width:210px; 
	  		height:210px; 
	  		margin-top: 60px;
	  	}

	  	.phone_input{
	  		width:80%;
	  		height:200px;
	  		margin: 0 auto;
	  		display: block;
	  		margin-top: 30px;
	  		box-shadow: 2px 2px 6px #eeeeee;
	  		border-radius: 11px;
			padding:10px
	  	}

	  </style>
</head>

<body style="background-color:#F7F9F8;">
	

	<div id="img_parent" class="pc_img_parent">
		<div id="qrcode" class="pc_qr_img"></div>

		<textarea placeholder="please input content" id="text" type="text" value="" class="pc_input" ></textarea>
	</div>
	<div id="make_btn" class="make_btn" data-pressed="make_pressed" style="width:160px;margin-top: 70px;color: white;padding-top: 10px;padding-bottom: 10px;text-align: center;border-radius: 2px;"> create qr image </div>






	<br/>
	<br/>
	<br/>


	<div style="margin: 0 auto;width: 180px;text-align: center;margin-top: 120px" onclick="decodeQr()"> decode qr image</div>


	<input style="margin: 0 auto;width: 180px;display: block;margin-top: 10px" type="file" id="newfile">

	<div style="margin: 0 auto;text-align: center;margin-top: 10px" id="result"></div>




	<script type="text/javascript">
		var input = document.getElementById("text");
		var makeBtn = document.getElementById("make_btn")

		function getParam(param) {
		    let strs;
		    const url = location.search; //获取url中"?"符后的字串
		    if (url.indexOf("?") != -1) {
		        const str = url.substr(1);
		        strs = str.split("&");

		      for (let i = 0; i < strs.length; ++i) {
		        if (strs[i].indexOf(param) >= 0) {
		          return strs[i].split("=")[1]
		        }
		      }
		    }
		    return ""
		}





		var qrcodeMaker = new QRCode(document.getElementById("qrcode"), {
		    width : 210,
		    height : 210
		});
		function makeqrcode(){
			qrcodeMaker.makeCode(input.value);
		}


		input.value = getParam("content");
		makeqrcode();


		input.onkeydown = function(e){
			if (e.keyCode == 13) {
				makeqrcode();
			}
		}







		var newfile = document.getElementById('newfile');
		var getObjectURL = function (file) {
		    var url = null;
		    if (window.createObjectURL != undefined) { // basic
		        url = window.createObjectURL(file);
		    } else if (window.URL != undefined) { // mozilla(firefox)
		        url = window.URL.createObjectURL(file);
		    } else if (window.webkitURL != undefined) { // webkit or chrome
		        url = window.webkitURL.createObjectURL(file);
		    }
		    return url;
		};



		var decodeResult = document.getElementById("result");
		newfile.onchange = function () {
		      console.log(newfile.files[0]);
		    console.log("url is " + getObjectURL(newfile.files[0]));// newfile[0]是通过input file上传的二维码图片文件
		    qrcode.decode(getObjectURL(newfile.files[0]));
		    qrcode.callback = function (imgMsg) {
		        // alert("二维码解析：" + imgMsg)
		        decodeResult.innerText = "result is:" + imgMsg
		    }
		}

	</script>

	<script type="text/javascript">
		var listener = function(e, id) {
	        switch(id) {
	            case "make_btn":
	            makeqrcode()
	            console.log("test is clicked");
	            break;
	            case "test1":
	            console.log("test1 is clicked");
	            break;
	        }
	    }
	    addClickListener(makeBtn, listener)



                   

	    if (isMobile) {
	    	input.classList.remove("pc_input")
	    	input.classList.add("phone_input")

	    	let img = document.getElementById("qrcode")
	    	img.classList.remove("pc_qr_img")
	    	img.classList.add("phone_qr_img")
                                let imgParent = document.getElementById("img_parent");
                                imgParent.classList.remove("pc_img_parent");
                                imgParent.classList.add("phone_img_parent")
	    }

	    makeBtn.style.marginLeft = (input.clientWidth/2 + input.offsetLeft - makeBtn.clientWidth/2)+ "px"
	</script>
</body>
</html>